<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-20">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        </el-breadcrumb>

        <router-link to="/addType">
            <el-button type="primary">添加分类</el-button>
        </router-link>

        <el-tabs class="m-t-10" v-model="activeTab">
            <el-tab-pane :label="typeName1" name="first">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(1)">修改名称
                </el-button>
                <el-table :data="tableData1" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="typeName2" name="second">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(2)">修改名称
                </el-button>
                <el-table :data="tableData2" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="typeName3" name="three">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(3)">修改名称
                </el-button>
                <el-table :data="tableData3" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="typeName4" name="four">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(4)">修改名称
                </el-button>
                <el-table :data="tableData4" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="typeName5" name="five">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(5)">修改名称
                </el-button>
                <el-table :data="tableData5" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="typeName6" name="six">
                <el-button type="info" icon="el-icon-edit" size="small" @click="modifyName(6)">修改名称
                </el-button>
                <el-table :data="tableData6" style="width: 100%" class="m-t-10">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="分类ID" width="100"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template #default="v">
                            <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="分类名称修改" v-model="dialog" width="25%" top="24vh">
            <el-input ref="name" v-model="form.name" placeholder="请输入分类名称"></el-input>
            <template #footer>
                <span class="dialog-footer">
                    <el-button size="small" @click="dialog = false">取消</el-button>
                    <el-button size="small" type="primary" @click="modifyNameDeal()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {
        del,
        get,
        put
    } from '@/network/request'
    export default {
        name: 'Type',
        data() {
            return {
                activeTab: 'first',
                tableData1: [],
                tableData2: [],
                tableData3: [],
                tableData4: [],
                tableData5: [],
                tableData6: [],
                typeName1: '',
                typeName2: '',
                typeName3: '',
                typeName4: '',
                typeName5: '',
                typeName6: '',
                dialog: false,
                form: {
                    id: 0,
                    name: ''
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                get('/typeList').then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.typeName1 = result.data[0][0]
                        this.typeName2 = result.data[0][1]
                        this.typeName3 = result.data[0][2]
                        this.typeName4 = result.data[0][3]
                        this.typeName5 = result.data[0][4]
                        this.typeName6 = result.data[0][5]
                        this.tableData1 = result.data[1]
                        this.tableData2 = result.data[2]
                        this.tableData3 = result.data[3]
                        this.tableData4 = result.data[4]
                        this.tableData5 = result.data[5]
                        this.tableData6 = result.data[6]
                    }
                }).catch()
            })
        },
        methods: {
            modifyName(index) {
                this.dialog = true
                this.form.id = index
            },
            modifyNameDeal() {
                if (this.form.name == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入分类名称',
                        offset: 60
                    })
                    this.$refs['name'].focus()
                    return false
                }
                put('/modifyTypeName', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        let id = this.form.id
                        let name = this.form.name
                        switch (id) {
                            case 1:
                                this.typeName1 = '视频' + name
                                break
                            case 2:
                                this.typeName2 = '视频' + name
                                break
                            case 3:
                                this.typeName3 = '音频' + name
                                break
                            case 4:
                                this.typeName4 = '音频' + name
                                break
                            case 5:
                                this.typeName5 = '文章' + name
                                break
                            case 6:
                                this.typeName6 = '文章' + name
                                break
                        }
                        this.dialog = false
                        this.form.name = ''
                    }
                }).catch()
            },
            handleEdit(index, row) {
                this.$router.push('/editType/' + row.id)
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del('/deleteType', {
                        'id': row.id
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            switch (this.activeTab) {
                                case 'first':
                                    this.tableData1.splice(index, 1)
                                    break

                                case 'second':
                                    this.tableData2.splice(index, 1)
                                    break

                                case 'three':
                                    this.tableData3.splice(index, 1)
                                    break

                                case 'four':
                                    this.tableData4.splice(index, 1)
                                    break

                                case 'five':
                                    this.tableData5.splice(index, 1)
                                    break

                                case 'six':
                                    this.tableData6.splice(index, 1)
                                    break
                            }

                            this.$message({
                                type: 'success',
                                message: '删除成功！',
                                offset: 60
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败！',
                                offset: 60
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除！',
                        offset: 60
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>